
    var MapSize = require("MapSize")
cc.Class({
    extends: cc.Component,
    properties: {

    
    },

    // use this for initialization
    onLoad: function () {
        this.node.setAnchorPoint(0,0);
        this.creatMap(MapSize.mapWidth,MapSize.mapHeight);
    },
    creatMap:function(width,height)
    {
        var width=width+MapSize.leftOrRightOverSize*2;
        var height=height+MapSize.topOrBottomOverSize*2;
        this._width=width;
        this._height=height;


        var ctx=this.node.getComponent(cc.Graphics);

        this.ctx=ctx;



        this.xMax=width/50;
        this.yMax=height/50;



        this._mapX=-width/2;
        this._mapY=-height/2;


        ctx.rect(this._mapX,this._mapY,width,height);
        ctx.fillColor=cc.color(38,36,53,255);
        ctx.fill();



        this.drawDangerLeft(100,0,0);
        this.drawDangerRight(100,0,0);
        this.drawDangerTop(100,0,0);
        this.drawDangerBottom(100,0,0);


        for(var x=0;x<this.xMax;x++)
        {
            if(this._mapX+x*50==0||this._mapX+x*50==width)
            {
               ctx.strokeColor=cc.color(0,255,0,50);
               ctx.lineWidth=7;
            }else{
                ctx.strokeColor=cc.color(255,255,100);
                ctx.lineWidth=1;
            }
            ctx.moveTo(this._mapX+x*50,this._mapY);
            ctx.lineTo(this._mapX+x*50,height+this._mapY);
            ctx.stroke();
        }
        for(var y=0;y<this.yMax;y++)
        {
            if(this._mapY+y*50==0||this._mapY+y*50==height)
            {
                ctx.strokeColor=cc.color(0,255,0,50);
                ctx.lineWidth=7;
            }else{
                ctx.strokeColor=cc.color(255,255,100);
                ctx.lineWidth=1;
            }
            ctx.moveTo(this._mapX,this._mapY+y*50);
            ctx.lineTo(width+this._mapY,this._mapY+y*50);
            ctx.stroke();
        }
    },
    drawDangerLeft:function(r,g,b){
        this.ctx.rect(this._mapX,this._mapY,MapSize.leftOrRightOverSize,this._height);
        this.ctx.fillColor=cc.color(r,g,b,255);
        this.ctx.fill();
    },
    drawDangerRight:function(r,g,b){
        this.ctx.rect(-this._mapX-MapSize.leftOrRightOverSize,this._mapY,
        MapSize.leftOrRightOverSize,this._height);
        this.ctx.fillColor=cc.color(r,g,b,255);
        this.ctx.fill();
    },
    drawDangerTop:function(r,g,b){
        this.ctx.rect(this._mapX,-this._mapY-MapSize.topOrBottomOverSize,
       this._width,MapSize.topOrBottomOverSize);
        this.ctx.fillColor=cc.color(r,g,b,255);
        this.ctx.fill();
    },
    drawDangerBottom:function(r,g,b){
        this.ctx.rect(this._mapX,this._mapY,
       this._width+MapSize.leftOrRightOverSize*2,MapSize.topOrBottomOverSize);
        this.ctx.fillColor=cc.color(r,g,b,255);
        this.ctx.fill();
    }
});